<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" style="padding-bottom:120rpx;" class="grace-border-b">
			<!-- 轮播图 -->
			<swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)"
				indicator-active-color="#3688FF" style="height:775rpx" interval="5000">
				<swiper-item class="grace-swiper-item" v-for="(item, index) in swiperItems" :key="index">
					<image style="height: 775rpx;" :src="gRequest.apiUrlImages + item.image" mode="scaleToFill"
						class="grace-swiper-image"></image>
				</swiper-item>
			</swiper>
			<!-- 商品标题 分享按钮 -->
			<view class="grace-product-padding grace-space-between grace-flex-vcenter">
				<text class="grace-product-title grace-bold">{{ goodsData.name }}</text>
				<view class="grace-product-share" @tap="openShare"><text class="grace-icons icon-share3"></text></view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 价格 -->
			<view class="grace-product-padding">
				<view class="grace-nowrap grace-flex-vcenter">
					<text class="grace-product-price">￥{{ goodsData.price }}</text>
					<text class="grace-text grace-gray grace-line-through"
						style="margin-left:30rpx;">￥{{ goodsData.special_price }}</text>
				</view>
				<view class="grace-space-between grace-flex-vcenter">
					<text class="grace-text-small grace-gray">已售 {{ goodsData.salenum }} 件</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 底部信息切换导航 -->
			<view class="grace-product-padding">
				<graceNavBar :items="navItems" lineHeight="80rpx" :isCenter="true" :currentIndex="active" :size="200"
					activeLineBg="#FF7900" textAlign="center" activeColor="#FF7900" activeLineWidth="200rpx"
					activeLineHeight="2rpx" :margin="10" @change="navChange"></graceNavBar>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="grace-product-padding" :hidden="active == 1">
				<rich-text :nodes="goodsData.description"></rich-text>
			</view>
			<!-- 评论区 -->
			<view class="grace-comments grace-product-padding" :hidden="active == 0">
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index">
					<image :src="item.face" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.nickname }}</text>
							<text class="grace-comments-info-text">{{ item.createtime }}</text>
						</view>
						<graceStar :starnum="item.star" activecolor="#E76B61" fontSize="40rpx" :cantap="false">
						</graceStar>
						<text class="grace-comments-content">{{ item.msg }}</text>
						<view class="grace-comments-imgs" v-if="item.evaluate_image.length > 0">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.evaluate_image"
								:key="indexImg">
								<image :src="gRequest.apiUrlImages + img.image" mode="scaleToFill"
									class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 属性选择 -->
			<graceBottomDialog :show="attrIsShow" @closeDialog="closeAttr">
				<form @submit="attrSubmit" style="box-sizing:border-box; padding:10rpx 25rpx;" class="grace-form"
					slot="content">
					<!-- 关闭按钮 -->
					<view class="grace-nowrap grace-flex-end"><text class="grace-icons icon-close"
							@tap="closeAttr"></text></view>
					<!-- 头部商品信息 -->
					<view class="grace-product-attr-info">
						<image class="grace-product-attr-info-image" style="height: 200rpx;width: 180rpx;"
							:src="gRequest.apiUrlImages + product_img"></image>
						<view class="grace-product-attr-info-body">
							<text class="grace-product-attr-info-title">{{ goodsData.name }}</text>
							<!-- <text class="grace-product-attr-info-stone">库存 : 1999件</text> -->
						</view>
					</view>
					<!-- 属性列表区 -->
					<scroll-view style="height:700rpx;" scroll-y>
						<view v-for="(value,index) in options" :key="value.option_value">
							<view class="grace-title grace-margin-top">{{value.option_name}}</view>
							<view>
								<graceSelectTags selectedColor="#FF0036" :items="value.option_value" type="radio">
								</graceSelectTags>
							</view>
						</view>
						<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
						<view style="margin-bottom: 40rpx;">
							<graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox>
						</view>
					</scroll-view>
					<view class="grace-product-attr-btn">
						<button type="warn" style="background-color:#FF0036;" class="grace-button grace-border-radius"
							formType="submit">立即购买</button>
					</view>
				</form>
			</graceBottomDialog>
			<!--  利用底部对话框插槽 + 宫格布局实现分享布局 -->
			<graceBottomDialog :show="show" @closeDialog="closeDialog">
				<view class="grace-grids grace-margin-top five" slot="content">
					<view class="grace-grids-items" @tap="shareFriendcricle">
						<image class="grace-grids-icon-img"
							src="https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/3fc9e15a76104e4d50eeab1348c5d3e0.png"
							mode="widthFix"></image>
						<text class="grace-grids-text">朋友圈</text>
					</view>
					<view class="grace-grids-items" @tap="shareFriend">
						<image class="grace-grids-icon-img"
							src="https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/6eb8ed792242f81a6c0629db7e4dfec1.png"
							mode="widthFix"></image>
						<text class="grace-grids-text">微信好友</text>
					</view>
					<!-- <view class="grace-grids-items">
						<image class="grace-grids-icon-img" src="https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/d5ac69d7dfb656222b3e4ccf6f429c6c.png" mode="widthFix"></image>
						<text class="grace-grids-text">QQ好友</text>
					</view> -->
				</view>
			</graceBottomDialog>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="grace-grids grace-nowrap" style="width:300rpx;">
				<view class="grace-grids-items grace-relative" @tap="gohome" style="width: 100rpx;">
					<text class="grace-grids-icon grace-icons icon-home"></text>
					<text class="grace-grids-text grace-grids-text" @tap="goHome">首页</text>
				</view>
				<view class="grace-grids-items grace-relative" style="width: 100rpx;" @tap="goService">
					<text class="grace-grids-icon grace-icons icon-kf3" style="font-size: 45rpx;color: #6b7375;"></text>
					<text class="grace-grids-text grace-grids-text">客服</text>
				</view>
				<view class="grace-grids-items grace-relative" style="width: 100rpx;" @tap="goToCart">
					<text class="iconfont icon-gouwuche" style="font-size: 45rpx;color: #6b7375;"></text>
					<text class="grace-grids-text grace-grids-text">购物车</text>
				</view>
			</view>
			<view class="grace-flex-end" style="width:440rpx;">
				<button type="warn" class="grace-footer-button" style="background:#E55D52;" @tap="buyNow">立即购买</button>
				<button type="warn" class="grace-footer-button" style="background:#F37B1D;"
					@tap="addToCart">加入购物车</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
	import graceSelectTags from '../../graceUI/components/graceSelectTags.vue';
	import graceStar from '../../graceUI/components/graceStar.vue';
	export default {
		data() {
			return {
				// 轮播图
				swiperItems: [],
				// 切换导航
				navItems: ['商品详情', '相关评论'],
				active: 0,
				// 模拟评论数据 (实际项目来自api请求)
				commentContents: [],
				// 购买选择属性层展示
				attrIsShow: false,
				colorTips: [{
					name: '灰色',
					value: '灰色',
					checked: true
				}, {
					name: '银色',
					value: '银色',
					checked: false
				}],
				colorSelected: '灰色',
				typeTips: [{
					name: '套餐一',
					value: '套餐一',
					checked: true
				}, {
					name: '套餐二',
					value: '套餐二',
					checked: false
				}, {
					name: '套餐三',
					value: '套餐三',
					checked: false
				}],
				typeSelected: '套餐一',
				options: [],
				buyNum: 1,
				goodsData: {},
				optionQuery: {},
				buyType: 1,
				product_img: "",
				show: false,
			};
		},
		onLoad: function(option) {
			this.optionQuery = option;
			this.gRequest.get(
				'/product/productinfo', {
					product_id: option.product_id
				},
				res => {
					this.swiperItems = res.data.photos;
					this.product_img = res.data.photos[0].image
					this.goodsData = res.data;
					for (let i = 0; i < res.data.evaluatelist.length; i++) {
						res.data.evaluatelist[i].star = Number(res.data.evaluatelist[i].star);
					}
					this.options = res.data.options
					for (let i = 0; i < this.options.length; i++) {
						for (let j = 0; j < this.options[i].option_value.length; j++) {
							this.options[i].option_value[j].name = this.options[i].option_value[j]
								.option_value_name
							this.options[i].option_value[j].value = this.options[i].option_value[j].option_id +
								"_" + this.options[i].option_value[j].option_value_id
							this.options[i].option_value[j].checked = j == 0 ? true : false
						}
					}
					this.commentContents = res.data.evaluatelist;
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				}
			);
		},
		methods: {
			openShare: function() {
				this.setData({
					show: true
				});
			},
			shareFriend: function() {
				//分享到微信朋友
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://share.wxiaoguan.com/index.html#/pages/productInfo/productShareInfo?product_id=" +
						this.goodsData.product_id, //这地址太长了，就省略了
					title: this.goodsData.name,
					summary: "",
					imageUrl: this.gRequest.apiUrlImages + this.goodsData.photos[0].image,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},

			//分享到微信朋友圈
			shareFriendcricle: function() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http:*******************",
					title: "你笑起来真好看",
					summary: "唐艺昕，没有水的地方叫沙漠，没有你的地方，你知道叫什么吗？不知道。叫寂寞。",
					imageUrl: "http:*******************",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			closeDialog: function() {
				this.setData({
					show: false
				});
			},
			goService() {
				uni.navigateTo({
					url: "../customerService/index"
				})
			},
			goToCart: function() {
				uni.switchTab({
					url: '../shoppingCard/shoppingCard'
				});
			},
			addToCart: function() {
				this.attrIsShow = true;
				this.buyType = 2
			},
			goHome: function() {
				uni.switchTab({
					url: '../index/index'
				});
			},
			// 分享
			share: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: 'none'
				});
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 评论图片展示
			showImgs: function(commentsIndex, imgIndex) {
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				});
			},
			//打开属性视图
			buyNow: function() {
				this.attrIsShow = true;
				this.buyType = 1
			},
			// 关闭属性
			closeAttr: function() {
				this.attrIsShow = false;
			},
			// 购买数量变化
			buyNumChange: function(e) {
				this.buyNum = e[0];
			},
			// 属性提交
			attrSubmit: function(e) {
				let option_value = {}
				for (let i = 0; i < this.options.length; i++) {
					for (let j = 0; j < this.options[i].option_value.length; j++) {
						if (this.options[i].option_value[j].checked) {
							option_value[this.options[i].option_value[j].value.split("_")[0]] = this.options[i]
								.option_value[j].value.split("_")[1]
						}
					}
				}
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: '../login/login'
					});
					return;
				}
				if (this.buyType == 1) {
					this.goodsData.quantity = this.buyNum
					this.goodsData.checked = true
					uni.setStorage({
						key: "orderList",
						data: JSON.stringify([this.goodsData]),
						success: function() {
							uni.navigateTo({
								url: '../shoppingCard/orderComfirm'
							});
						}
					})
				} else {
					this.gRequest.post(
						'/api_cart/add_to_cart', {
							product_id: this.optionQuery.product_id,
							member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
							option_value: JSON.stringify(option_value),
							quantity: this.buyNum
						},
						'form', {},
						res => {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							});
						}
					);
				}
				//如果想关闭属性
				this.closeAttr();
			},
			// 返回首页
			gohome: function() {
				uni.switchTab({
					url: '../index/index'
				});
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceBottomDialog,
			graceSelectTags,
			graceNumberBox,
			graceStar
		}
	};
</script>
<style>
	.grace-common-line {
		height: 16rpx;
	}

	.grace-product-padding {
		padding: 20rpx 25rpx;
	}

	.grace-product-title {
		line-height: 44rpx;
		font-size: 28rpx;
	}

	.grace-product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #ff7900;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.grace-product-share:after {
		width: 0;
		height: 0;
	}

	.grace-product-price {
		color: #ff7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.grace-product-info-img {
		width: 100%;
	}

	.grace-product-attr-info {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f1f1f3;
		padding-bottom: 26rpx;
	}

	.grace-product-attr-info-image {
		width: 120rpx;
		height: auto;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.grace-product-attr-info-body {
		width: 700rpx;
	}

	.grace-product-attr-info-title {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
		display: block;
	}

	.grace-product-attr-info-stone {
		width: 100%;
		font-size: 20rpx;
		margin-top: 8rpx;
		color: #666666;
		display: block;
	}

	.icon-close {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #888888;
	}

	/* 调整宫格大小 */
	.grace-grids-items {
		padding: 6rpx 0;
		width: 120rpx;
	}

	.grace-grids-icon {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 40rpx;
		color: #6b7375;
	}

	.grace-grids-text {
		line-height: 28rpx;
		font-size: 20rpx;
		margin-top: 2px;
		color: #6b7375;
	}

	.grace-footer-active {
		color: #ff0036;
	}

	.grace-grids-items {
		width: 20%;
	}
</style>
